import { CommonComponentProps, CommonEditForm, PageStyleProps } from "./types";
interface IOption {
    text: string | React.ReactNode;
    value: any;
    key?: string;  // 对应的属性的key
    defaultValue?: string;
}

export const defaultBorderStyleOptions: IOption[] = [
    {
        text: "无",
        value: "none"
    },
    {
        text: "实线",
        value: "solid"
    },
    {
        text: "点状线",
        value: "dotted"
    },
    {
        text: "虚线",
        value: "dashed",
    },
    {
        text: "双线",
        value: "double"
    },
    {
        text: "3D 凹槽边框",
        value: "groove"
    },
    {
        text: "3D 垄状边框",
        value: "ridge"
    },
    {
        text: "3D inset边框",
        value: "inset"
    },
    {
        text: "3D outset边框",
        value: "outset"
    }
]

export const defaultFontFamilyOptions: IOption[] = [
    {text: "宋体", value: '"SimSun","STSong"'},
    {text: "黑体", value: '"SimHei","STHeiti"'},
    {text: "楷体", value: '"KaiTi","STKaiti"'},
    {text: "仿宋", value: '"FangSong","STFangsong"'}
];

export const defualtFontStyleOptions: IOption[] = [
    {text: "加粗", value: "bold", key: "fontWeight", defaultValue: "normal"},
    {text: "斜体", value: "italic", key: "fontStyle", defaultValue: ""},
    {text: "下划线", value: "underline", key: "textDecoration", defaultValue: "none"}
]

export const commonDefaultProps: CommonComponentProps = {
    // 事件属性
    actionType: "",
    url: "",
    // 尺寸属性
    height: "auto",
    width: "auto",
    paddingLeft: "0px",
    paddingRight: "0px",
    paddingTop: "0px",
    paddingBottom: "0px",
    // border type
    borderStyle: "none",
    borderColor: "#000",
    borderWidth: "0px",
    borderRadius: "0%",
    // shadow and opacity
    opacity: "1",
    boxShadow: '0 0 0 0 #000000',
    // position and x, y
    left: "0",
    top: "0",
    display: "block"
}

const shadowCombineOrder = ["h-shadow", "v-shadow", "blur", "spread", "color"]
const initBoxShadowData = (key: string, v: string) => {
    if (!v) return;
    const shadowArr = v?.split(" ");
    const index = shadowCombineOrder.findIndex(item => item === key);
    const value = shadowArr?.length > index ? shadowArr[index] : undefined;
    return value ? parseInt(String(value).includes("px") ? value.slice(0, -2) : value) : undefined
}

export const commonDefaultEdit: CommonEditForm = {
    // 尺寸属性
    height: {
        tag: "InputNumber",
        label: "高度",
        type: "size",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${commonDefaultProps.height}`
    },
    width: {
        tag: "InputNumber",
        label: "宽度",
        type: "size",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${commonDefaultProps.width}`
    },
    paddingLeft: {
        tag: "InputNumber",
        label: "左边距",
        type: "size",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${value}`
    },
    paddingRight: {
        tag: "InputNumber",
        label: "右边距",
        type: "size",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${value}`
    },
    paddingTop: {
        tag: "InputNumber",
        label: "上边距",
        type: "size",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${value}`
    },
    paddingBottom: {
        tag: "InputNumber",
        label: "下边距",
        type: "size",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${value}`
    },
    // border type
    borderStyle: {
        tag: "VSelect",
        label: "边框样式",
        options: defaultBorderStyleOptions,
        type: "border",
        propType: "style"
    },
    borderColor: {
        tag: "VColorPicker",
        label: "边框颜色",
        type: "border",
        propType: "style"
    },
    borderWidth: {
        tag: "Slider",
        label: "边框宽度",
        extraProps: {
            min: 0,
            max: 20,
            step: 1
        },
        type: "border",
        propType: "style"
    },
    borderRadius: {
        tag: "Slider",
        label: "边框圆角",
        extraProps: {
            min: 0,
            max: 200,
            step: 1
        },
        type: "border",
        propType: "style",
    },
    // shadow and opacity
    opacity: {
        tag: "Slider",
        label: "透明度",
        extraProps: {
            min: 0,
            max: 1,
            step: 0.1
        },
        type: "shadow",
        propType: "style"
    },
    boxShadow: {
        type: "shadow",
        propType: "style",
        form: [{
            tag: "Slider",
            label: "阴影水平偏移",
            key: "h-shadow",
            type: "shadow",
            initialTransform: (v) => {
                return initBoxShadowData("h-shadow", v);
            },
            afterTransform: (v) => `${v}px`,
            extraProps: {
                min: -10,
                max: 10,
                step: 1
            }
        }, {
            tag: "Slider",
            label: "阴影垂直偏移",
            key: "v-shadow",
            type: "shadow",
            initialTransform: (v) => {
                return initBoxShadowData("v-shadow", v);
            },
            afterTransform: (v) => `${v}px`,
            extraProps: {
                min: -10,
                max: 10,
                step: 1
            }
        }, {
            tag: "Slider",
            label: "阴影模糊",
            key: "blur",
            type: "shadow",
            extraProps: {
                min: 0,
                max: 20,
                step: 1
            },
            initialTransform: (v) => {
                return initBoxShadowData("blur", v);
            },
            afterTransform: (v) => `${v}px`
        }, {
            tag: "Slider",
            label: "阴影大小",
            key: "spread",
            type: "shadow",
            extraProps: {
                min: 0,
                max: 20,
                step: 1
            },
            initialTransform: (v) => {
                return initBoxShadowData("spread", v);
            },
            afterTransform: (v) => `${v}px`
        }, {
            tag: "VColorPicker",
            label: "阴影颜色",
            key: "color",
            type: "shadow",
            initialTransform: (v) => {
                if (!v) return "";
                const shadowArr = v?.split(" ");
                const index = shadowCombineOrder.findIndex(item => item === "color");
                return shadowArr?.length > index ? shadowArr[index] : "";
            },
        }],
        combineFunc: (current, value, key) => {
            const curArr = current.split(" ");
            const index = shadowCombineOrder.findIndex(item => item === key);
            if(index !== -1){
                curArr[index] = value;
                return curArr.join(" ");
            }
            return current;
        }
    },
    // position and x, y
    left: {
        tag: "InputNumber",
        label: "X轴",
        type: "position",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${commonDefaultProps.height}`
    },
    top: {
        tag: "InputNumber",
        label: "Y轴",
        type: "position",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value) => value ? `${value}px` : `${commonDefaultProps.height}`
    },
}

// 页面相关form编辑配置
export const pageFormPage = {
    backgroundColor: {
        tag: "VColorPicker",
        label: "背景颜色",
        propType: "style"
    },
    backgroundImage: {
        tag: "VImageProcess",
        propType: "style",
        extraProps: {
            showDelete: true  
        },
        afterTransform: (value: any) => value ? `url('${value}')` : `${value}`,
        initialTransform: (value: string) => {
            const result = (/url\('(.*?)'\)/ig).exec(value || "");
            if(result?.length && result?.length >= 2){
                return result[1];
            }
            return value;
        }
    },
    backgroundRepeat: {
        tag: "VSelect",
        label: "背景重复",
        propType: "style",
        options: [
            {text: "无重复", value: "no-repeat"},
            {text: "x重复", value: "repeat-x"},
            {text: "y重复", value: "repeat-y"},
            {text: "全部重复", value: "repeat"}
        ]
    },
    backgroundSize: {
        tag: "VSelect",
        label: "背景大小",
        propType: "style",
        options: [
            {text: "自动缩放", value: "contain"},
            {text: "自动填充", value: "cover"},
            {text: "默认", value: "auto"}
        ]
    },
    height: {
        tag: "InputNumber",
        label: "高度",
        propType: "style",
        initialTransform: (value: string) => parseInt(String(value).includes("px") ? value.slice(0, -2) : value),
        afterTransform: (value: any) => value ? `${value}px` : `${value}`
    },
}

export const defaultPageStyle: PageStyleProps = {
    backgroundColor: "none",
    backgroundRepeat: "no-repeat",
    backgroundSize: "auto",
    height: "600px"
}